<template>
<div :class="[$style.container]">
  <el-col :span="24">
    <el-form-item prop="variables.url" label="上传文档" :rules="[{required: true, message: '请上传文档权限'}]" ref="fmi">
      <el-upload action="" :class="[$style.upload]" drag :http-request="httpRequest" :limit="1" :on-success="onSuccess" :on-remove="onRemove">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-form-item>
  </el-col>
</div>
</template>

<script lang="ts">

import { Vue, Component, Prop, Emit, Ref } from 'vue-property-decorator'
import { httpRequest } from '@/utils/oss'
import { ElFormItem } from 'element-ui/types/form-item'

@Component
export default class DocUpdateForm extends Vue {
  @Prop() form!: any

  @Ref() fmi!: ElFormItem

  httpRequest = httpRequest

  onSuccess (response: any, file: any, fileList: any) {
    const size = file.size
    const name = file.name
    const url = file.response?.url
    Object.assign(this.form.variables, { size, name, url })
    this.fmi.clearValidate()
  }

  onRemove () {
    this.form.variables = {
      name: '',
      size: 0,
      url: ''
    }
  }

  created () {
    this.form.variables = {
      name: '',
      size: 0,
      url: ''
    }
  }
}
</script>

<style lang="scss" module>
@import "~@/styles/vars.scss";

.container {

}

.upload {
  :global {
    .el-upload {
      width: 100%;
      .el-upload-dragger {
        width: 100%;
      }
    }
  }
}

</style>
